<template>
    <el-dialog v-model="dialogVisible" title="公告信息" width="30%" id="notice-view">
        <div>
            <h2>公告时间</h2>{{ noticeInfo.time }}
        </div>
        <div>
            <h2>公告内容</h2>{{ noticeInfo.content }}
        </div>
        <div>
            <h2>涉及小区</h2>{{ noticeInfo.area }}
        </div>
    </el-dialog>
</template>

<script setup>
import { useMenuStore } from '../../store/index.js'
const menuStore = useMenuStore()
let dialogVisible = ref(false)
let noticeInfo = ref({
    time: '',
    content: '',
    area: ''
})

watch(() => menuStore.activeIndex, val => {
    if (val === '6') {
        dialogVisible.value = true
        // 从localStorage获取公告数据
        const notices = JSON.parse(localStorage.getItem('notices') || '[]')
        // 获取最新的一条公告
        if (notices.length > 0) {
            const latestNotice = notices[notices.length - 1]
            noticeInfo.value = latestNotice
        }
    } else {
        dialogVisible.value = false
    }
})
</script>

<style lang="scss">
#notice-view {
    h2 {
        display: inline-block;
        font-weight: bolder;
        margin-right: 10px;
    }

    border-radius: 6px;

    header {
        margin-right: 0;
        background-color: #474df1;
        padding-top: 6px;
        border-radius: 6px 6px 0 0;

        span {
            color: white;
        }

        button {
            top: -4px;
        }
    }

}
</style>